<template>
	
	<div class="all_china">
		<div class="topbar">
			<img class="red_ring" src="/static/img/red_ring.png"/>

			<div class="machine_type">
				<Button type="info">设备类型</Button>
			</div>
		</div>
		<Row>
			<Col span="18">
				<div class="all_china_map">
					<a href="/home/factoryWatch">
						<img src="/static/img/china_map.png"/>
					</a>
				</div>
			</Col>
			<Col span="6">
				<div class="all_right">
					<div class="all_machine_num">
						<span>录入设备总数</span>
						<p>4324</p>
					</div>		
							
					<div class="runing_state">
						<div class="run_tite">运行状态</div>
						<Row :gutter="16">
							<Col span="12">
								<div class="state_num_box  run_state">
									<span>启动</span>
									<p>834</p>
								</div>
							</Col>
							<Col span="12">
								<div class="state_num_box  stop_state">
									<span>停机</span>
									<p>834</p>
								</div>
							</Col>
						</Row>					
						
						<div class="mach_rank_tab">
							<table border="0" cellspacing="0" cellpadding="0">
								<thead>
									<tr>
										<td>排名</td>
										<td>工厂</td>
										<td>占比</td>
										<td>数量</td>
									</tr>
								</thead>
								<tbody>
									<tr v-for="item of factoryRank">
										<td>{{item.rank}}</td>
										<td>{{item.facName}}</td>
										<td>
											<div class="rate_box">
												<span class="green_rate" >{{item.ratioBig}}</span>
											</div>
											<div class="rate_box">
												<span class="gray_rate">{{item.ratioSmall}}</span>
											</div>
										</td>
										<td>
											<span class="green_color">{{item.countBig}}</span>
											<span>{{item.countSmall}}</span>
										</td>
									</tr>
									
								</tbody>
							</table>
						</div>
					</div>
					
					<div class="runing_state">
						<div class="run_tite">异常状态</div>
						<Row :gutter="16">
							<Col span="12">
								<div class="state_num_box  run_state">
									<span>正常</span>
									<p>834</p>
								</div>
							</Col>
							<Col span="12">
								<div class="state_num_box  unnormal_state">
									<span>异常</span>
									<p>834</p>
								</div>
							</Col>
						</Row>
						<div class="mach_rank_tab">
							<table border="0" cellspacing="0" cellpadding="0">
								<thead>
									<tr>
										<td>排名</td>
										<td>工厂</td>
										<td>占比</td>
										<td>数量</td>
									</tr>
								</thead>
								<tbody>
									<tr v-for="item of factoryRank">
										<td>{{item.rank}}</td>
										<td>{{item.facName}}</td>
										<td>
											<div class="rate_box">
												<span class="green_rate" >{{item.ratioBig}}</span>
											</div>
											<div class="rate_box">
												<span class="red_rate">{{item.ratioSmall}}</span>
											</div>
										</td>
										<td>
											<span class="green_color">{{item.countBig}}</span>
											<span>{{item.countSmall}}</span>
										</td>
									</tr>
									
								</tbody>
							</table>
						</div>
					</div>			
					
				</div>
			</Col>
		</Row>
						
	</div>
	
</template>

<script>
export default{
	data(){
		return {
			factoryRank:[
				{
					rank:'1',
					facName:'辽宁工厂',
					ratioBig:'70%',
					ratioSmall:'30%',
					countBig:'250',
					countSmall:'24'
				},
				{
					rank:'1',
					facName:'辽宁工厂',
					ratioBig:'70%',
					ratioSmall:'30%',
					countBig:'250',
					countSmall:'24'
				},
				{
					rank:'1',
					facName:'辽宁工厂',
					ratioBig:'70%',
					ratioSmall:'30%',
					countBig:'250',
					countSmall:'24'
				},
				{
					rank:'1',
					facName:'辽宁工厂',
					ratioBig:'70%',
					ratioSmall:'30%',
					countBig:'250',
					countSmall:'24'
				},
			]
		}
	}
}
</script>

<style scoped="scoped">
	@import url("all_china.css");

</style>